<!DOCTYPE html>
<!-- <html lang="zh-CN"> -->

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>反洗钱预警管控平台——登入页面</title>
    <style>
        html {
            overflow: scroll;
            background: linear-gradient(to right, rgb(118, 118, 173), rgb(40, 126, 119));
            cursor: default;
        }

        body {
            font-family: 微软雅黑;
        }

        .top-bar {
            position: fixed;
            height: 60px;
            width: 100%;
            text-align: center;
            display: table;
            border-width: 1px;
            border-style: solid;
            border-color: #030d13;
            top: 0;
            right: 0;
            left: 0;
            z-index: 100;
            color: rgb(255, 255, 255);
            /* margin-top: 0px; */
            margin: 0;
            background: rgba(0, 0, 0, .5);
        }

        .top-bar>ul {
            padding: 0;
            margin: 0;
            list-style: none;
            display: flex;
            height: 100%;
            /* justify-content: space-between; */
        }

        .top-bar>ul>li {
            height: 100%;
            display: table-cell;
            /* margin: 0 0; */
            vertical-align: middle;
            cursor: default;
            width: 25%;
        }

        .top-bar>ul>li:hover {
            background-color: rgba(49, 107, 129, 0.4);
        }

        .top-bar>ul>li>button {
            width: 100%;
            height: 100%;
            background-color: transparent;
            font-size: 1.11vw;
            border: none;
            color: #fff;
            margin: 0;
        }


        .login-rect {
            overflow: hidden;
            border-radius: 18px;
            box-shadow: 2px 2px 6px 6px rgba(0, 0, 0, .1);
            /* display: block; */
            margin-top: 120px;
            margin-left: 50%;
            width: 30%;
            /* height: 380px; */
            background-color: #ffffff;
            font-size: 1.1vw;
        }

        .login-rect-element {
            width: 80%;
            margin: 0 auto;
        }

        .blue-line {
            width: 100%;
            height: 8px;
            margin-bottom: 1vh;
            background-color: rgb(59, 125, 224);
        }

        .login-title {
            color: rgb(59, 125, 224);
            font-size: 2vw;
            margin: 2vw 0;
            width: 80%;
        }

        .input-title {
            display: block;
            color: #777;
            font-size: 0.9vw;
            margin: 0px;
        }

        .underline-input {
            border: none;
            outline: none;
            width: 100%;
            padding: 0.2em;
            margin: 0.5em 0;
            box-sizing: border-box;
            border: 0px;
            border-bottom: 1px solid gray;
            font-size: 1.1vw;
        }

        .underline-input:focus {
            border-bottom: 1px solid #87CEEB;
        }

        .remember-password {
            display: flex;
            align-items: center;
            margin-bottom: 1vw;
        }

        .checkbox {
            display: block;
            width: 0.9vw;
            height: 0.9vw;
            margin-right: 0.5rem;
        }

        label {
            margin-left: 0.1em;
            color: #777;
            font-size: 0.9em;
        }

        button:hover {
            cursor: pointer;
        }

        button::after {
            width: 100%;
            /* display: none; */
            position: relative;
            background-color: rgba(0, 0, 0, 1);
            height: 100%;
            margin: 0px auto;
        }

        .sign-area {
            width: 100%;
            background-color: #ffffff;
            padding: 1vw 0;
        }

        .sign-in {
            border-width: 0;
            border-radius: 4px;
            margin: 1vw 0;
            width: 100%;
            height: 2.5vw;
            background-color: #0a90e3;
            color: #fff;
            text-align: center;
            line-height: 30px;
        }

        .sign-in:hover {
            background-color: #3c58e4;
        }

        .sign-in>.text {
            /* display: none; */
            margin: 0px;
            font-size: 1vw;
        }

        .sign-up {
            border-width: 0;
            border-radius: 4px;
            margin: 1vw 0;
            width: 100%;
            height: 2.5vw;
            font-size: 1vw;
            background-color: #bdbec0;
            color: #fff;
            text-align: center;
            line-height: 30px;
        }

        .sign-up:hover {
            background-color: #3c58e4;
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .loader {
            display: none;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #0a90e3;
            border-radius: 50%;
            width: 1vw;
            height: 1vw;
            margin-top: 0.5vw;
            animation: rotate 1s linear infinite;
        }

        .bottom-float-window {
            border-radius: 20px;
            padding: 30px;
            background-color: #000;
            color: #ffffff;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
            font-size: 24px;
            text-align: center;
            position: fixed;
            display: block;
            z-index: 1024;
            min-width: 300px;
            min-height: 50px;
            max-width: 500px;
            top: 80%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: opacity 0.3s ease-in-out;
        }
    </style>
</head>

<body>
    <div class="top-bar">
        <ul>
            <li><button>
                    功能模块
                </button></li>
            <li><button>
                    功能模块
                </button></li>
            <li><button>
                    功能模块
                </button></li>
            <li><button>
                    功能模块
                </button></li>
        </ul>
    </div>
    <div class="login-rect" id="sign-in">
        <div class="blue-line"></div>
        <div class="login-rect-element">
            <p class="login-title">欢迎登入<br>反洗钱预警管控平台</p>
            <p class="input-title">用户名</p>
            <input type="text" class="underline-input" title="account">
            <p class="input-title">密码</p>
            <input type="password" class="underline-input" title="password">
            <div class="remember-password">
                <input type="checkbox" id="remember" class="checkbox">
                <label for="remember">记住密码</label>
            </div>
            <div class="sign-area">
                <button class="sign-in" onclick="handleClick()">
                    <p class="text">登入</p>
                    <div class="loader"></div>
                </button>
                <button class="sign-up" onclick="handleClick2()">注册账号</button>
            </div>
        </div>
    </div>

    <div class="login-rect" id="sign-up">
        <div class="blue-line"></div>
        <div class="login-rect-element">
            <p class="login-title">欢迎注册<br>反洗钱预警管控平台</p>
            <p class="input-title">用户名</p>
            <input type="text" class="underline-input" title="account" placeholder="1~15位的字母数字组合">
            <p class="input-title">密码</p>
            <input type="password" class="underline-input" title="password" placeholder="6~18位的字母数字组合">
            <p class="input-title">确认密码</p>
            <input type="password" class="underline-input" title="password2" placeholder="重复你的密码">
            <div class="sign-area">
                <button class="sign-in" onclick="handleClick3()">
                    <p class="text">注册</p>
                    <div class="loader"></div>
                </button>
                <button class="sign-up" onclick="handleClick4()">返回登入</button>
            </div>
        </div>
    </div>

</body>

<script>
    if (hasCookie('token')) {
        window.location.href = "./Menu";
    }
    // 添加/更新数据
    function setCookie(key, value, days = 1) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = key + "=" + encodeURIComponent(value) + expires + "; path=/";
    }

    // 删除数据
    function deleteCookie(key) {
        setCookie(key, "", -1);
    }

    // 检查数据是否存在
    function hasCookie(key) {
        var cookies = document.cookie.split(";");
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i].trim();
            if (cookie.startsWith(key + "=")) {
                return true;
            }
        }
        return false;
    }

    function getCookieValue(key) {
        var cookies = document.cookie.split(";");
        for (var i = 0; i < cookies.length; i++) {
            var cookie = cookies[i].trim();
            if (cookie.startsWith(key + "=")) {
                return decodeURIComponent(cookie.substring(key.length + 1));
            }
        }
        return undefined;
    }

    function float_text(msg, keepTime=3000) {
        const floatingWindow = document.createElement("div");
        floatingWindow.classList.add("bottom-float-window");
        floatingWindow.innerHTML = `${msg}`;
        document.body.appendChild(floatingWindow);
        setTimeout(function () {
            floatingWindow.style.opacity = 0;
            setTimeout(function () {
                floatingWindow.remove();
            }, 300);
        }, keepTime);
    }

    const firstDiv = document.getElementById('sign-in');
    const secondDiv = document.getElementById('sign-up');
    secondDiv.style.display = 'none';

    function getRequestUrl(data, api) {
        let url = api + '?';
        for (const key in data) {
            if (data.hasOwnProperty(key)) {
                url += `${key}=${data[key]}&`;
            }
        }
        return url.slice(0, -1);
    }

    function fetchWithTimeout(url, options = {}, timeout = 8000) {
        return Promise.race([
            fetch(url, options),
            new Promise((_, reject) =>
                setTimeout(() => reject(new Error('timeout')), timeout)
            )
        ]);
    }

    const accountInput = document.querySelector("#sign-in input[title='account']");
    const passwordInput = document.querySelector("#sign-in input[title='password']");
    const sign_in_button = document.querySelector("#sign-in .sign-in");

    accountInput.addEventListener("keydown", function (event) {
        if (event.key === 'Enter') {
            sign_in_button.click();
        }
    });

    accountInput.addEventListener("keyup", function (event) {
        if (localStorage.getItem(`password_${this.value}`) !== null){
            passwordInput.value = localStorage.getItem(`password_${this.value}`);
            document.querySelector("#sign-in input#remember").checked = true;
        }
    });

    passwordInput.addEventListener("keydown", function (event) {
        if (event.key === 'Enter') {
            sign_in_button.click();
        }
    });

    var buttonActive = false;
    var buttonActive2 = false;
    var buttonActive3 = false;
    var buttonActive4 = false;

    function handleClick() {
        if (buttonActive) {
            return;
        }
        buttonActive = true;

        var text = document.querySelector('#sign-in .sign-in .text');
        var loader = document.querySelector('#sign-in .sign-in .loader');
        var button = document.querySelector('#sign-in .sign-in');
        var button2 = document.querySelector('#sign-in .sign-up');

        var input1 = document.querySelector("#sign-in input.underline-input[title='account']");
        var input2 = document.querySelector("#sign-in input.underline-input[title='password']");
        var input3 = document.querySelector("#sign-in input#remember");

        if (input1.value == '' || input2.value == '') {
            float_text('用户名或密码不可为空');
            buttonActive = false;
            return;
        }

        text.style.display = 'none';
        loader.style.display = 'inline-block';
        button.style.pointerEvents = 'none';
        button2.style.pointerEvents = 'none';

        // const api = 'https://cors-anywhere.herokuapp.com/http://47.109.78.200:10010/user/login';
        const api = 'http://47.109.78.200:10010/user/login';
        const data = {
            userId: input1.value,
            password: input2.value
        }
        const fullAPI = getRequestUrl(data, api);
        fetchWithTimeout(fullAPI)
            .then(response => {
                return response.json();
            })
            .then(data => {
                if (data['code'] == 100) {
                    var token = data['token'];
                    // 存储token到本地, 默认有效期1天
                    setCookie('token', token);
                    setCookie('login_userId', input1.value);
                    //-----------------------
                    if(input3.checked){
                        localStorage.setItem(`password_${input1.value}`, input2.value);
                    }else{
                        localStorage.removeItem(`password_${input1.value}`);
                    }
                    window.location.href = "./Menu";
                } else {
                    float_text('用户名或密码错误!');
                }
            })
            .catch(error => {
                if (error == 'Error: timeout') {
                    float_text('登入超时, 请重试');
                } else {
                    console.log(error);
                    float_text('登入出现异常, 请稍后再试');
                }
            }).then(temp => {
                text.style.display = '';
                loader.style.display = 'none';
                button.style.pointerEvents = 'auto';
                button2.style.pointerEvents = 'auto';
                buttonActive = false;

                input1.value = '';
                input2.value = '';
                input1.focus();
            });

    }

    function handleClick2() {
        if (buttonActive2) {
            return;
        }
        buttonActive2 = true;

        var input1 = document.querySelector("#sign-in input.underline-input[title='account']");
        var input2 = document.querySelector("#sign-in input.underline-input[title='password']");
        var input3 = document.querySelector("#sign-in input#remember");
        input1.value = '';
        input2.value = '';
        input3.value = '';

        buttonActive2 = false;
        firstDiv.style.display = 'none';
        secondDiv.style.display = 'block';

    }
    function handleClick3() {
        if (buttonActive3) {
            return;
        }
        buttonActive3 = true;

        var text = document.querySelector('#sign-up .sign-in .text');
        var loader = document.querySelector('#sign-up .sign-in .loader');
        var button = document.querySelector('#sign-up .sign-in');
        var button2 = document.querySelector('#sign-up .sign-up');

        var input1 = document.querySelector("#sign-up input.underline-input[title='account']");
        var input2 = document.querySelector("#sign-up input.underline-input[title='password']");
        var input3 = document.querySelector("#sign-up input.underline-input[title='password2']");

        if (input1.value == '' || input2.value == '') {
            float_text('用户名或密码不可为空');
            buttonActive3 = false;
            return;
        }

        if (input2.value != input3.value) {
            float_text('两次密码不一致');
            buttonActive3 = false;
            return;
        }

        var legal = true;
        for (var idx in input1.value) {
            var i = input1.value[idx];
            console.log(i);
            if ((i >= 'a' && i <= 'z') || (i >= 'A' && i <= 'Z')) {
                continue;
            }
            if (i >= '0' && i <= '9') {
                continue;
            }
            legal = false;
        }
        if (!legal) {
            float_text('用户名只能包含字母和数字');
            buttonActive3 = false;
            return;
        }

        if (input1.value.length > 15) {
            float_text('用户名长度最大为15');
            buttonActive3 = false;
            return;
        }

        if (input2.value.length < 6 || input2.value.length > 18) {
            float_text('密码的长度应在6~18之间');
            buttonActive3 = false;
            return;
        }

        text.style.display = 'none';
        loader.style.display = 'inline-block';

        const api = 'http://47.109.78.200:10010/user/register';
        const data = {
            userId: input1.value,
            password: input2.value
        }
        var fullRequest = getRequestUrl(data, api);
        fetchWithTimeout(fullRequest)
            .then(response => response.json())
            .then(data => {
                if (data['code'] == 100) {
                    firstDiv.style.display = 'block';
                    secondDiv.style.display = 'none';
                    float_text('注册成功!');
                    accountInput.value = input1.value;
                    passwordInput.value = input2.value;
                } else {
                    float_text('该用户名已被注册');
                }
            })
            .catch(error => {
                if (error == 'Error: timeout') {
                    float_text('注册超时, 请重试');
                } else {
                    console.log(error);
                    float_text('注册出现异常, 请稍后再试');
                }
            }).then(temp => {
                text.style.display = '';
                loader.style.display = 'none';
                buttonActive3 = false;
                input1.value = '';
                input2.value = '';
                input3.value = '';
            });
    }
    function handleClick4() {
        if (buttonActive4) {
            return;
        }
        buttonActive4 = true;

        var input1 = document.querySelector("#sign-up input.underline-input[title='account']");
        var input2 = document.querySelector("#sign-up input.underline-input[title='password']");
        var input3 = document.querySelector("#sign-up input.underline-input[title='password2']");
        input1.value = '';
        input2.value = '';
        input3.value = '';

        buttonActive4 = false;
        firstDiv.style.display = 'block';
        secondDiv.style.display = 'none';
    }
</script>

</html>